<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartArea',
  props: {
    value: Object,
    text: String,
    subtext: String
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    generateChart (_legend, _xAxis, _yAxis, _series) {
      let option = {
        title: {
          x: 'left'
        },
        tooltip: {
          trigger: 'axis',
          // 坐标轴指示器
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'rgba(0,122,255,0.6)'
            }
          },
          backgroundColor: 'rgba(73,91,127,1)',
          formatter (a, b, c) {
            // let series = self.chartMeteo.getOption().series
            // let tip = a[0].axisValue + '<br>'
            // for (let i = 0; i < a.length; i++) {
            //   let seriesIndex = a[i].seriesIndex
            //   let val =
            //     a[i].value !== 'NaN'
            //       ? a[i].value.toFixed(1) + series[seriesIndex].unit
            //       : '-'
            //   tip = tip + a[i].seriesName + ':' + val + '<br>'
            // }
            // return tip
          }
        },
        legend: {
          show: false // 不显示legend
          // data: _legend,
          // x: 'center',
          // textStyle: {
          //   color: '#000'
          // }
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _xAxis,
          axisLabel: {
            color: '#AFBCD1'
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#5F7190'
            }
          },
          // 指示器设置
          axisPointer: {
            lineStyle: {
              color: '#7D9DBB',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          id: 1,
          type: 'value',
          min: 3,
          splitNumber: 5,
          axisLabel: {
            textStyle: {
              color: '#a8aab0',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            }
          },
          axisLine: {
            onZeroAxisIndex: 2,
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E5E9ED'
            }
          }

        },
        series: _series
      }

      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    }
  },
  mounted () {
    let _series = []
    let _legend = []
    const dataDict = {
      max: {
        name: '最大天数',
        color: '#ff5e3a',
        value: [],
        unit: '天'
      },
      min: {
        name: '最小天数',
        color: '#58cbb2',
        value: [],
        unit: '天'
      },
      avg: {
        name: '平均天数',
        color: '#007aff',
        value: [],
        unit: '天'
      }
    }
    let lineObj = {
      max: [19, 15, 17, 18, 16, 17, 18, 17, 17, 16, 18, 16],
      min: [14, 10, 12, 13, 11, 12, 13, 12, 12, 11, 13, 11],
      avg: [15, 11, 13, 15, 14, 14, 15, 13, 15, 13, 14, 13]
    }

    for (let item in dataDict) {
      let _dict = dataDict[item]
      _legend.push(_dict.name)
      let dataVal = lineObj[item]
      if (item === 'max') {
        let _sery = {
          name: _dict.name,
          unit: _dict.unit,
          type: 'line',
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              color: _dict.color
            }
          },
          lineStyle: {
            opacity: 0
          }, // 隐藏线
          areaStyle: {
            color: 'rgba(0,122,255,0.1)'
          }, // 上限区域
          data: dataVal
        }
        _series.push(_sery)
      } else if (item === 'min') {
        let _sery = {
          name: _dict.name,
          unit: _dict.unit,
          type: 'line',
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              color: _dict.color
            }
          },
          lineStyle: {
            opacity: 0
          }, // 隐藏线
          areaStyle: {
            color: '#fff'
          }, // 下限区域
          data: dataVal
        }
        _series.push(_sery)
      } else {
        let _sery = {
          name: _dict.name,
          unit: _dict.unit,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          showSymbol: false,
          itemStyle: {
            normal: {
              color: _dict.color
            }
          },
          data: dataVal
        }
        _series.push(_sery)
      }
    }
    this.$nextTick(() => {
      let _xAxis = ['12201', '12202', '12203', '12204', '12301', '12302', '12303', '12304', '12401', '12402', '12403', '12404']
      let _yAxis = ['12201', '12202', '12203', '12204', '12301', '12302', '12303', '12304', '12401', '12402', '12403', '12404']
      this.generateChart(_legend, _xAxis, _yAxis, _series)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
